<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="账号">
              <a-input placeholder="请输入账号" v-model="queryParam.username"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item label="性别">
              <a-select v-model="queryParam.sex" placeholder="请选择性别">
                <a-select-option value>请选择性别查询</a-select-option>
                <a-select-option value="1">男性</a-select-option>
                <a-select-option value="2">女性</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <template v-if="toggleSearchStatus">
            <a-col :span="6">
              <a-form-item label="邮箱">
                <a-input placeholder="请输入邮箱" v-model="queryParam.email"></a-input>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="手机号码">
                <a-input placeholder="请输入手机号码" v-model="queryParam.phone"></a-input>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="状态">
                <a-select v-model="queryParam.status" placeholder="请选择状态">
                  <a-select-option value>请选择状态</a-select-option>
                  <a-select-option value="1">正常</a-select-option>
                  <a-select-option value="2">解冻</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>

          <a-col :span="6">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
              >重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      ref="table"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,onSelect:onSelect}"
      @change="handleTableChange"
    ></a-table>
  </a-modal>
</template>

<script>
import { filterObj } from "@/utils/util";
import { getUserList } from "@/api/api";

export default {
  name: "SelectUserListModal",
  components: {},
  data() {
    return {
      title: "选择用户",
      queryParam: {},
      columns: [
        {
          title: "用户账号",
          align: "center",
          dataIndex: "username",
          fixed: "left",
          width: 200
        },
        {
          title: "用户名称",
          align: "center",
          dataIndex: "realname"
        },
        {
          title: "性别",
          align: "center",
          dataIndex: "sex",
          customRender: function(text) {
            if (text == 1) {
              return "男";
            } else if (text == 2) {
              return "女";
            } else {
              return text;
            }
          }
        },
        {
          title: "手机号码",
          align: "center",
          dataIndex: "phone"
        },
        {
          title: "邮箱",
          align: "center",
          dataIndex: "email"
        },
        {
          title: "状态",
          align: "center",
          dataIndex: "status",
          customRender: function(text) {
            if (text == 1) {
              return "正常";
            } else if (text == 2) {
              return "冻结";
            } else {
              return text;
            }
          }
        }
      ],
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ["5", "10", "20"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      isorter: {
        column: "createTime",
        order: "desc"
      },
      selectedRowKeys: [],
      selectionRows: [],
      visible: false,
      toggleSearchStatus: false
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    add(selectUser, userIds) {
      this.visible = true;
      this.edit(selectUser, userIds);
    },
    edit(selectUser, userIds) {
      if (!userIds) {
        this.selectedRowKeys = [];
      } else {
        this.selectedRowKeys = userIds.split(",");
      }
      if (!selectUser) {
        this.selectionRows = [];
      } else {
        var that = this;
        that.selectionRows = [];
        selectUser.forEach(function(record, index) {
          console.log(record);
          that.selectionRows.push({
            id: that.selectedRowKeys[index],
            realname: record
          });
        });
        // this.selectionRows = selectUser;
      }
    },
    loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      let params = this.getQueryParams(); //查询条件
      getUserList(params).then(res => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
        }
      });
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParam, this.isorter);
      param.field = this.getQueryField();
      //--update-begin----author:scott---date:20190818------for:新建公告时指定特定用户翻页错误SelectUserListModal #379----
      // param.current = this.ipagination.current;
      // param.pageSize = this.ipagination.pageSize;
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      //--update-end----author:scott---date:20190818------for:新建公告时指定特定用户翻页错误SelectUserListModal #379---
      return filterObj(param);
    },
    getQueryField() {
      let str = "id,";
      for (let a = 0; a < this.columns.length; a++) {
        str += "," + this.columns[a].dataIndex;
      }
      return str;
    },
    //--update-begin----author:kangxiaolin---date:20190921------for:系统发送通知 用户多选失败 #513----
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    onSelect(record, selected) {
      if (selected == true) {
        this.selectionRows.push(record);
      } else {
        this.selectionRows.forEach(function(item, index, arr) {
          if (item.id == record.id) {
            arr.splice(index, 1);
          }
        });
      }
      //--update-end----author:kangxiaolin---date:20190921------for:系统发送通知 用户多选失败 #513----
    },

    searchReset() {
      let that = this;
      Object.keys(that.queryParam).forEach(function(key) {
        that.queryParam[key] = "";
      });
      that.loadData(1);
    },
    handleTableChange(pagination, filters, sorter) {
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc";
      }
      this.ipagination = pagination;
      this.loadData();
    },
    handleCancel() {
      this.selectionRows = [];
      this.selectedRowKeys = [];
      this.visible = false;
    },
    handleOk() {
      this.$emit("choseUser", this.selectionRows);
      this.handleCancel();
    },
    searchByquery() {
      this.loadData(1);
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus;
    }
  }
};
</script>
<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}
.anty-row-operator button {
  margin: 0 5px;
}
.ant-btn-danger {
  background-color: #ffffff;
}

.ant-modal-cust-warp {
  height: 100%;
}
.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}
.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}

.anty-img-wrap {
  height: 25px;
  position: relative;
}
.anty-img-wrap > img {
  max-height: 100%;
}
</style>